<template>
  <!-- 订单 销售人员统计 柱状图 -->
    <div id="chartsbar2"></div>
</template>

<script>
import * as echarts from "echarts";

import {orderNumbySale} from "@/api/tenantApis/indexStatistics.js"
export default {
  name: "",
  data() {
    return {
      myChart1: null,
      xData: ['2024-06-01','2024-06-02','2024-06-03','2024-06-04',],
      nums:[12,20,18,30],
      moneys:[4564,8652,6441,12245]
    };
  },
  created() {},
  mounted() {
    this.$nextTick(() => {
      var chartDom = document.getElementById("chartsbar2");
      this.myChart1 = echarts.init(chartDom);
      this.getData();
    });
  },
  methods: {
    getData(){
      orderNumbySale().then(res=>{
        this.xData = []
        this.nums = []
        this.moneys = []
        if(res.data&&res.data.length){
          res.data.forEach(r=>{
            this.xData.push(r.saleName)
            this.nums.push(r.cot)
            this.moneys.push(r.amount)
          })
        }
        this.initCharts1()
      })
    },
    initCharts1() {
      const colors=['#A0D7E7','#FFCE73']
      let option = {
        title: {
          show: false,
          text: "",
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          }
        },
        color: colors,
        legend: {
          show: true,
          data: [{
              name:'数量',
              textStyle:{
                color:colors[0]
              }
            },
            {
              name:'金额',
              textStyle:{
                color:colors[1]
              }
            }
          ],
        },
        grid: {
          left: "80",
          right: "100",
          top: "50",
          bottom: "20",
        },

        xAxis: [
        {
            name: '',
            type: 'category',
            axisTick: { show: false },
            axisLine:{
              lineStyle:{
                color: '#EAEBF0'
              }
            },
            nameTextStyle:{
              color: '#333'
            },
            axisLabel:{
              color: '#333'
            },
            
            data: this.xData
          }
        ],
        yAxis: [
          {
              name: '数量',
              type: 'value',
              position:'left',
              // offset: 80,
              axisLine:{
                show: true,
                lineStyle: {
                  color: colors[0]
                }
              },
              axisLabel:{
                color: '#333',
                // formatter: '{value} 单'
              },
              splitLine:{
                lineStyle:{
                  color:'#EAEBF0',
                  type:'dotted'
                }
              },
              axisTick:{
                show:false
              }
            },
            {
              name: '金额',
              type: 'value',
              position:'right',
              // offset: 80,
              axisLine:{
                show: true,
                lineStyle: {
                  color: colors[1]
                }
              },
              axisLabel:{
                color: '#333',
                formatter: '{value} 元'
              },
              splitLine:{
                lineStyle:{
                  color:'#EAEBF0',
                  type:'dotted'
                }
              },
              axisTick:{
                show:false
              }
            }
        ],
        series: [
          {
            name: '数量',
            type: 'bar',
            emphasis: {
              focus: 'series'
            },
            barMaxWidth:'30',
            data: this.nums
          },
          {
            name: '金额',
            type: 'bar',
            yAxisIndex: 1,
            emphasis: {
              focus: 'series'
            },
            barMaxWidth:'30',
            data: this.moneys
          },
        ],
      };
      this.myChart1&&option && this.myChart1.setOption(option);
    },
  },
};
</script>

<style scoped lang="scss">
#chartsbar2 {
  width: 100%;
  height: 250px;
}
</style>
